<!--
 * @Description: 用户登录
 * @Author: rendc
 * @Date: 2021-09-09 11:22:59
 * @LastEditors: rendc
 * @LastEditTime: 2021-09-09 12:18:15
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户登录</title>
</head>

<body>
  <button onclick="login()">登录</button>
  <button onclick="findAllUser()">查询所有用户</button>
</body>
<script>
  // 用户登录
  // 输入用户名 密码 到后台校验
  // 后台校验成功后 会返回一个令牌 
  // 用户再次访问 携带令牌即可
  // 后台可以通过令牌去判断
  // 登录时间 30 那我后台直接将令牌失效 你需要重新登录
  // 创建一个http请求对象 xhr - 小黄人
  function login() {
    var httpRequest = new XMLHttpRequest();
    var obj = {
      username: 'admin1',
      password: '123321',
    }
    // 打开一个http连接
    httpRequest.open('post', 'http://203.195.246.58:8888/user/login');
    // 配置post请求 数据格式
    httpRequest.setRequestHeader("Content-Type", "application/json")
    // 发起请求// post的参数放到send中
    httpRequest.send(JSON.stringify(obj));
    // 处理响应
    httpRequest.onreadystatechange = function () {
      if (httpRequest.readyState === 4 && httpRequest.status === 200) {
        // 获取响应里的数据
        var res = httpRequest.responseText;
        var resObj = JSON.parse(res);
        var token = resObj.data.token;
        // 保存token
        sessionStorage.setItem("token", token);
        console.log(sessionStorage.getItem("token"));
      }
      if (httpRequest.readyState === 4 && httpRequest.status === 500) {
        // 获取响应里的数据
        console.log("错误" + httpRequest.responseText);
      }
    }
  }

  function findAllUser() {
    // 创建一个http请求对象 xhr - 小黄人
    var httpRequest = new XMLHttpRequest();
    // 打开一个http连接
    httpRequest.open('get', 'http://203.195.246.58:8888/baseUser/findAll');
    // 配置密钥
    httpRequest.setRequestHeader("Authorization", sessionStorage.getItem("token"));
    // 发起请求
    httpRequest.send();
    // 处理响应
    httpRequest.onreadystatechange = function () {
      // httpRequest.readyState === 4 代表http请求完成
      // httpRequest.status === 200 代表请求成功了
      if (httpRequest.readyState === 4 && httpRequest.status === 200) {
        // 获取响应里的数据
        console.log(httpRequest.responseText);
      }
      if (httpRequest.readyState === 4 && httpRequest.status === 500) {
        // 获取响应里的数据
        console.log("错误" + httpRequest.responseText);
      }
    }
  }
</script>

</html>